<template>
  <div id="main-content">
    <div class="content">
      <el-header>
        <div class="title">看房预约列表</div>
      </el-header>
      <div class="selectBar">
        <el-form ref="form" :model="subscribeQuery" label-width="180px" :inline="true">
          <el-form-item label="客户称呼">
            <el-input v-model="subscribeQuery.customerName"></el-input>
          </el-form-item>
          <el-form-item label="客户电话号码">
            <el-input v-model="subscribeQuery.telephone"></el-input>
          </el-form-item>
          <el-form-item label="预约日期">
              <el-date-picker
                v-model="subscribeQuery.queryTimes"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
          </el-form-item>
          <el-form-item label="微信号">
            <el-input v-model="subscribeQuery.wechat"></el-input>
          </el-form-item>
        </el-form>
        <el-row>
          <el-col :span="24">
            <el-button @click="search('BY_SELECT_BTN')" size="small" type="primary" icon="el-icon-search">查询</el-button>
            <el-button size="small" icon="el-icon-refresh" @click="resetForm">重置</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="table-content" v-loading="loading">
        <el-table :data="subscribeList" border style="width: 100%">
          <!-- 
            <el-table-column label="ID">
            <template slot-scope="scope">
              <el-link type="primary" @click="toSubscribeInfoPage(scope.row.id)">{{scope.row.id}}</el-link>
            </template>
          </el-table-column>
          -->
          <el-table-column prop="hourseName" label="预约楼盘"></el-table-column>
          <el-table-column prop="customerName" label="客户称呼"></el-table-column>
          <el-table-column prop="telephone" label="电话号码"></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column prop="appointmentTime" label="预约看房时间"></el-table-column>
          <el-table-column prop="wechat" label="微信号"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      subscribeQuery: {
        customerName: "",
        telephone: "",
        wechat:"",
        queryTimes:[]
      },
      pageNo: 1,
      pageSize: 10,
      total: 0,
      subscribeList: []
    };
  },
  computed: {
      
  },
  methods: {
    search(source) {
      if(source == 'BY_SELECT_BTN'){
        this.subscribeQuery.pageNo = 1;
      }else{
        this.subscribeQuery.pageNo = this.pageNo;
      }
      this.loading = true;
      this.subscribeQuery.pageSize = this.pageSize;
      this.$http
        .post("/api/subscribe/query/page", this.subscribeQuery)
        .then(response => {
          if (response && response.data && response.data.content) {
            this.subscribeList = response.data.content;
            for(var i = 0;i<this.subscribeList.length;i++){
              var appointmentTime = this.subscribeList[i].appointmentTime;
              if(appointmentTime){
                this.subscribeList[i].appointmentTime = this.$moment(appointmentTime).format("YYYY-MM-DD h:mm");
              }
              var createTime = this.subscribeList[i].createTime;
              this.subscribeList[i].createTime = this.$moment(createTime).format("YYYY-MM-DD H:mm:ss");
            }
            this.total = response.data.totalElements;
          }
          this.loading = false;
        });
    },
    handleCurrentChange() {
      this.search();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.search();
    },
    toSubscribeInfoPage(subscribeId) {
      this.$router.push("/subscribeInfo/" + subscribeId);
    },
    resetForm(){
      this.subscribeQuery = {
        customerName: "",
        telephone: "",
        wechat:"",
        startTime:"",
        endTime:""
      }
    }
  },
  created() {
    this.search();
  }
};
</script>
<style>
#main-content {
  width: 90%;
  margin: 0 auto;
}
.title {
  font-size: 18px;
  color: #303133;
}
.content {
  width: 100%;
  min-height: 1000px;
  padding: 15px;
}
.pagination {
  margin: 0 auto;
  margin-top: 10px;
  width: 1000px;
}
.table-content{
  margin-top: 15px;
}
</style>